import { useState } from "react";
import "./index.css";
const menus = [
  {
    name: "文旅",
    id: 1,
    children: [
      { name: "住房服务", id: 1 },
      { name: "公共事业", id: 2 },
      { name: "社保服务", id: 3 },
    ],
  },
  {
    name: "卫生",
    id: 2,
    children: [
      { name: "住房服务", id: 1 },
      { name: "公共事业", id: 2 },
      { name: "社保服务", id: 3 },
      { name: "就业服务", id: 4 },
      { name: "医疗服务", id: 5 },
      { name: "交通服务", id: 6 },
      { name: "证件办理", id: 7 },
      { name: "企业服务", id: 8 },
      { name: "自制服务", id: 9 },
      { name: "经营纳税", id: 10 },
      { name: "婚育收养", id: 11 },
    ],
  },
  {
    name: "教育",
    id: 3,
    children: [
      { name: "住房服务", id: 1 },
      { name: "公共事业", id: 2 },
      { name: "社保服务", id: 3 },
      { name: "就业服务", id: 4 },
      { name: "住房服务", id: 1 },
      { name: "公共事业", id: 2 },
      { name: "社保服务", id: 3 },
      { name: "就业服务", id: 4 },
    ],
  },
  {
    name: "科技",
    id: 4,
    children: [
      { name: "住房服务", id: 1 },
      { name: "公共事业", id: 2 },
    ],
  },
  {
    name: "体育",
    id: 5,
    children: [{ name: "住房服务", id: 1 }],
  },
  {
    name: "部件",
    id: 6,
    children: [
      { name: "住房服务", id: 1 },
      { name: "公共事业", id: 2 },
    ],
  },
  { name: "资源", id: 7, children: [] },
  {
    name: "管理",
    id: 8,
    children: [
      { name: "住房服务", id: 1 },
      { name: "公共事业", id: 2 },
      { name: "社保服务", id: 3 },
      { name: "就业服务", id: 4 },
      { name: "医疗服务", id: 5 },
      { name: "交通服务", id: 6 },
      { name: "证件办理", id: 7 },
      { name: "企业服务", id: 8 },
      { name: "自制服务", id: 9 },
      { name: "经营纳税", id: 10 },
    ],
  },
  {
    name: "应急",
    id: 9,
    children: [
      { name: "住房服务", id: 1 },
      { name: "公共事业", id: 2 },
      { name: "社保服务", id: 3 },
      { name: "就业服务", id: 4 },
      { name: "医疗服务", id: 5 },
      { name: "交通服务", id: 6 },
      { name: "证件办理", id: 7 },
      { name: "企业服务", id: 8 },
      { name: "自制服务", id: 9 },
    ],
  },
  {
    name: "人口",
    id: 10,
    children: [
      { name: "住房服务", id: 1 },
      { name: "公共事业", id: 2 },
      { name: "社保服务", id: 3 },
      { name: "就业服务", id: 4 },
      { name: "医疗服务", id: 5 },
      { name: "交通服务", id: 6 },
      { name: "证件办理", id: 7 },
    ],
  },
  {
    name: "民生",
    id: 11,
    children: [
      { name: "住房服务", id: 1 },
      { name: "公共事业", id: 2 },
      { name: "社保服务", id: 3 },
      { name: "就业服务", id: 4 },
      { name: "医疗服务", id: 5 },
      { name: "交通服务", id: 6 },
    ],
  },
];
const Navigationdial = () => {
  const [menu, setMenu] = useState(menus[1]);
  /**
   * 得到数组平均值并依次排序及倒叙
   * @param {Number} arrLength 数组长度
   * @param {Number} i 数组下标
   * @return {Number} 处理后的结果
   */
  const arrSort = (arrLength, i) => {
    let result;
    let median = arrLength / 2;
    if (median > i) {
      result = i + 1;
    } else if (median <= i) {
      result = arrLength - i;
    }
    return result || i;
  };

  const navClick = (menuObj) => {
    setMenu(menuObj);
  };
  const calculated = () => {
    let count = menu.children.length;
    return count >= 5 ? 15 : count >= 3 ? 30 : 15;
  };
  let precession = 160;
  return (
    <div className="container">
      <div className="menuLeft">
        {menu.children?.map((item, index) => {
          console.log(arrSort(menu.children.length, index));
          return (
            <div
              style={{
                marginLeft:
                  precession -
                  arrSort(menu.children.length, index) * calculated(),
              }}
              className="itemTitle"
            >
              <a href="https://example.com" className="rotateBtn">
                {item.name}
              </a>
            </div>
          );
        })}
      </div>
      <div className="menuRight">
        <div className="menuWarp">
          <ul>
            {menus.map((data, index) => (
              <li
                key={index}
                style={{
                  transform: `rotate(${
                    (360 / menus.length) * index
                  }deg) translateX(150px)`,
                  transformOrigin: "center center",
                }}
                className="styles.menu_item"
              >
                <a
                  href="https://example.com"
                  onClick={() => {
                    navClick(data, (360 / menus.length) * index);
                  }}
                  className="nav_item"
                  style={
                    menu === data
                      ? {
                          color: "#fff",
                          backgroundColor: "rgb(19,103,225)",
                          transform: `rotate(-${
                            (360 / menus.length) * index
                          }deg)`,
                          transition: "all 1s",
                        }
                      : {
                          transform: `rotate(-${
                            (360 / menus.length) * index
                          }deg)`,
                          transition: "all 1s",
                        }
                  }
                >
                  <span>{data.name}</span>
                </a>
              </li>
            ))}
          </ul>
        </div>
      </div>
      <div className="menuCore"></div>
    </div>
  );
};
export default Navigationdial;
